'use client'; // 声明为客户端组件，启用客户端交互功能

import { useEffect, useState } from 'react';
import { PaginationState, Pokemon } from './types/pokemon';
import {
  getPokemonList,
  getBatchPokemonDetails,
  getPokemonByMultipleTypes
} from './services/pokemonService';
import PokemonCard from './components/PokemonCard';
import TypeFilter from './components/TypeFilter';
import Pagination from './components/Pagination';

/**
 * 宝可梦列表主页组件
 * 实现了宝可梦列表的展示、分页、类型过滤等功能
 */
export default function Home() {
  // ============== 状态管理 ==============
  // 当前展示的宝可梦列表
  const [pokemons, setPokemons] = useState<Pokemon[]>([]);
  // 选中的宝可梦类型ID
  const [selectedTypes, setSelectedTypes] = useState<string[]>([]);
  // 分页状态：当前页码、每页数量、总数
  const [pagination, setPagination] = useState<PaginationState>({
    currentPage: 1,
    itemsPerPage: 24,
    totalItems: 0
  });
  // 加载状态标识
  const [isLoading, setIsLoading] = useState<boolean>(true);
  // 错误信息
  const [error, setError] = useState<string | null>(null);
  
  /**
   * 核心数据加载逻辑
   * 依赖于当前页码、每页数量和选中的类型
   * 当这些依赖变化时重新加载数据
   */
  useEffect(() => {
    /**
     * 异步获取宝可梦数据
     * 根据是否有选中类型决定获取方式
     */
    const fetchPokemon = async () => {
      try {
        // 设置加载状态，清除之前的错误
        setIsLoading(true);
        setError(null);
        
        // 用于存储API返回的结果和总数
        let pokemonResults;
        let totalCount;
        
        // 根据是否有选中类型分两种处理方式
        if (selectedTypes.length > 0) {
          // 1. 有选中类型：按类型过滤
          // 将字符串类型ID转换为数字
          const typeIds = selectedTypes.map(id => parseInt(id));
          // 获取符合所有选中类型的宝可梦
          const typeData = await getPokemonByMultipleTypes(typeIds);
          
          // 前端分页处理（类型过滤时在前端分页）
          const start = (pagination.currentPage - 1) * pagination.itemsPerPage;
          const end = start + pagination.itemsPerPage;
          pokemonResults = typeData.pokemon.slice(start, end);
          totalCount = typeData.totalCount;
        } else {
          // 2. 无选中类型：获取所有宝可梦（后端分页）
          const offset = (pagination.currentPage - 1) * pagination.itemsPerPage;
          // 直接从API获取当前页的宝可梦列表
          const response = await getPokemonList(pagination.itemsPerPage, offset);
          pokemonResults = response.results;
          totalCount = response.count;
        }
        
        // 获取宝可梦详细信息
        const pokemonDetails = await getBatchPokemonDetails(pokemonResults);
        
        // 更新状态
        setPokemons(pokemonDetails);
        setPagination(prev => ({ ...prev, totalItems: totalCount }));
      } catch (err) {
        setError('加载失败。请稍后再试。');
      } finally {
        setIsLoading(false);
      }
    };
    
    // 执行数据获取并记录日志
    fetchPokemon().then(r => console.log('首页加载完成'));
  }, [pagination.currentPage, pagination.itemsPerPage, selectedTypes]);
  
  /**
   * 处理类型选择事件
   * @param typeId 选中的类型ID
   */
  const handleTypeSelect = (typeId: string) => {
    // 添加到已选类型列表
    setSelectedTypes(prev => [...prev, typeId]);
    // 重置到第一页（类型变更后，总是从第一页开始显示）
    setPagination(prev => ({ ...prev, currentPage: 1 }));
  };
  
  /**
   * 处理类型取消选择事件
   * @param typeId 取消选中的类型ID
   */
  const handleTypeDeselect = (typeId: string) => {
    // 从已选类型列表中移除
    setSelectedTypes(prev => prev.filter(id => id !== typeId));
    // 重置到第一页
    setPagination(prev => ({ ...prev, currentPage: 1 }));
  };
  
  /**
   * 处理分页变化事件
   * @param page 目标页码
   */
  const handlePageChange = (page: number) => {
    // 更新当前页码
    setPagination(prev => ({ ...prev, currentPage: page }));
    // 滚动到页面顶部，提升用户体验
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };
  
  // ============== 组件渲染 ==============
  return (
    <div className="container mx-auto px-4 py-8">
      {/* 页面标题 */}
      <header className="mb-8 text-center">
        <h1 className="text-3xl md:text-4xl font-bold mb-4">宝可梦Demo</h1>
        <p className="text-gray-600 max-w-2xl mx-auto">欢迎来到宝可梦世界</p>
      </header>
      
      {/* 宝可梦总数显示 */}
      <div className="mb-6 flex justify-center items-center">
        <div className="bg-blue-50 py-2 px-6 rounded-full">
          <span className="text-lg font-semibold text-blue-700">
            宝可梦总数: {pagination.totalItems}
          </span>
        </div>
      </div>
      
      {/* 类型筛选组件 */}
      <TypeFilter
        selectedTypes={selectedTypes}
        onTypeSelect={handleTypeSelect}
        onTypeDeselect={handleTypeDeselect}
      />
      
      {/* 错误提示显示 */}
      {error && (
        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-6">
          <strong className="font-bold">Error! </strong>
          <span className="block sm:inline">{error}</span>
        </div>
      )}
      
      {/* 根据加载状态显示不同内容 */}
      {isLoading ? (
        // 加载中显示加载动画
        <div className="text-center py-10">
          <div className="inline-block animate-spin rounded-full h-8 w-8 border-2 border-blue-500 border-t-transparent mb-2"></div>
          <p className="mt-2 text-lg font-medium">加载宝可梦中...</p>
        </div>
      ) : (
        <>
          {/* 宝可梦网格 */}
          {pokemons.length > 0 ? (
            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
              {/* 循环渲染宝可梦卡片 */}
              {pokemons.map(pokemon => (
                <PokemonCard key={pokemon.id} pokemon={pokemon}/>
              ))}
            </div>
          ) : (
            // 无结果时显示提示
            <div className="text-center py-10">
              <p className="text-lg font-medium">未找到宝可梦</p>
            </div>
          )}
          
          {/* 分页控件 - 仅在有结果时显示 */}
          {pokemons.length > 0 && (<Pagination pagination={pagination} onPageChange={handlePageChange}/>)}
        </>
      )}
    </div>
  );
}
